<template>
  <div class="form">
    <!--<div class="model-title">-->
      <!--<h4>马德里商标国际注册申请书</h4>-->
    <!--</div>-->

    <div class="header-extent">
      <el-row>
        <el-checkbox :label="1" v-model="organization.appFileCodeCheck">申请人或代理人文件编号:</el-checkbox>
        <span>{{organization.appFileCode}}</span>
      </el-row>
      <el-row>
        <el-checkbox :label="1" v-model="organization.pagesCountCheck">附页页数</el-checkbox>
         <span>{{organization.pagesCount}}</span>
      </el-row>
    </div>
    <!-- 一 -->
    <section>
      <div class="sec-title">
        <h4>一、申请人信息：</h4>
      </div>
      <div class="sec-content">
        <div class="sec-chapter">
          1、申请人中文全称及外文译名 :
          <div class="sec-box">
            <p class="sec-content-txt">（如无外文译名的，可用拼音代替；中文名称应与国内注册证或受理通知书完全一致）</p>
            <div>
              <el-input
                v-if="editable"
                v-model="organization.applicantsName"
                placeholder="请输入申请人中文全称"
                size="small"
              ></el-input>
              <span v-else>{{organization.applicantsName}}</span>
            </div>
            <div>
              <el-input
                v-if="editable"
                v-model="organization.applicantsNameEn"
                placeholder="请输入申请人外文全称"
                size="small"
              ></el-input>
              <span v-else>{{organization.applicantsNameEn}}</span>
            </div>
          </div>
        </div>

        <div class="sec-chapter">
          2、申请人地址：
          <div class="sec-box">
            <p class="sec-content-txt">(地址应与国内注册证或受理通知书一致,相关文件中的地址未冠有省、市、县等行政区划的，申请人应当增加相应行政区划名称)</p>
            <el-input
              v-if="editable"
              v-model="organization.applicantsAppAddr"
              placeholder="请输入申请人地址"
              size="small"
            ></el-input>
            <span v-else>{{organization.applicantsAppAddr}}</span>
          </div>
          <p>
            邮政编码 :
            <el-input
              v-if="editable"
              v-model="organization.postcode"
              placeholder="请输入邮政编码"
              size="small"
              class="inline-input"
            ></el-input>
            <span v-else>{{organization.postcode}}</span>
          </p>
        </div>

        <div class="sec-chapter">
          <el-row>
            <el-col :span="12">
              <div>
                3. 电话（含地区号） :
                <el-input
                  class="inline-input"
                  v-if="editable"
                  v-model="organization.phone"
                  placeholder="请输入电话"
                  size="small"
                ></el-input>
                <span v-else>{{organization.phone}}</span>
              </div>
            </el-col>
            <el-col :span="12">
              传真（含地区号）:
              <el-input
                class="inline-input"
                v-if="editable"
                v-model="organization.fax"
                placeholder="请输入传真(含地区号)"
                size="small"
              ></el-input>
              <span v-else>{{organization.fax}}</span>
            </el-col>
            <el-col :span="12">
              电子邮件地址 :
              <el-input
                class="inline-input"
                v-if="editable"
                v-model="organization.emailAddr"
                placeholder="请输入电子邮件地址"
                size="small"
              ></el-input>
              <span v-else>{{organization.emailAddr}}</span>
            </el-col>
          </el-row>
        </div>

        <div class="sec-chapter">
          4、申请人通信地址：
          <div class="sec-box">
            <el-input
              v-if="editable"
              v-model="organization.applicantsCommAddr"
              placeholder="请输入申请人地址"
              size="small"
            ></el-input>
            <span v-else>{{organization.applicantsCommAddr}}</span>
          </div>
        </div>

        <div class="sec-chapter">
          5、收文语言选择 ：
          <div class="sec-box">
            <el-radio-group v-model="organization.languageFile">
              <el-radio :label="1">英语</el-radio>
              <el-radio :label="2">法语</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </section>

    <!-- 二 -->
    <section>
      <div class="sec-title">
        <h4>二、申请人资格：</h4>
      </div>
      <div class="sec-content">
        <el-checkbox-group v-model="organization.applicantsStatus">
          <el-checkbox
            label="申请人在中国设有真实有效的工商营业场所"
            value="申请人在中国设有真实有效的工商营业场所"
            style="display:block"
          ></el-checkbox>
          <el-checkbox label="或者申请人在中国设有住所" value="或者申请人在中国设有住所" style="display:block"></el-checkbox>
          <el-checkbox label="或者申请人具有中国国籍" value="或者申请人具有中国国籍" style="display:block"></el-checkbox>
        </el-checkbox-group>
        <p style="color:#ccc">注：请按说明填写</p>
      </div>
    </section>

    <!-- 三 -->
    <section>
      <div class="sec-title">
        <h4>三、代理人信息：</h4>
      </div>
      <div class="sec-content">
        <div class="sec-chapter">
          1、代理人中文全称及外文译名(如无外文译名的，可用拼音代替) :
          <div class="sec-box">
            <el-input v-if="editable" v-model="organization.proxyName" placeholder="请输入申请人中文全称" size="small"></el-input>
            <span v-else>{{organization.proxyName}}</span>
          </div>
        </div>

        <div class="sec-chapter">
          2、代理人地址(省份、城市、街道、门牌号码、邮政编码) ：
          <div class="sec-box">
            <el-input v-if="editable" v-model="organization.proxyAddr" placeholder="请输入申请人地址" size="small"></el-input>
            <span v-else>{{organization.proxyAddr}}</span>
          </div>
        </div>
        <!-- 代理人 -->
        <div class="sec-chapter">
          <el-row>
            <el-col :span="12">
              <div>
                3. 电话（含地区号） :
                <el-input
                  class="inline-input"
                  v-if="editable"
                  v-model="organization.phone"
                  placeholder="请输入电话"
                  size="small"
                ></el-input>
                <span v-else>{{organization.phone}}</span>
              </div>
            </el-col>
            <el-col :span="12">
              传真（含地区号）:
              <el-input
                class="inline-input"
                v-if="organization.editable"
                v-model="organization.fax"
                placeholder="请输入传真(含地区号)"
                size="small"
              ></el-input>
              <span v-else>{{organization.fax}}</span>
            </el-col>
            <el-col :span="12">
              电子邮件 :
              <el-input
                class="inline-input"
                v-if="organization.editable"
                v-model="organization.emailAddr"
                placeholder="请输入电子邮件"
                size="small"
              ></el-input>
              <span v-else>{{organization.emailAddr}}</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </section>

    <!-- 四 -->
    <section>
      <div class="sec-title">
        <h4>四、基础申请或基础注册：</h4>
      </div>
      <div class="sec-content">
        <el-row>
          <el-col :span="12">
            申请号：
            <el-input
              class="inline-input"
              v-if="editable"
              v-model="organization.appCode"
              placeholder="请输入申请号"
              size="small"
            ></el-input>
            <span v-else>{{organization.appCode}}</span>
          </el-col>
          <el-col :span="12">
            申请日期：
            <el-date-picker
              v-if="editable"
              v-model="organization.appDate"
              size="small"
              type="date"
              placeholder="请选择申请日期"
            ></el-date-picker>
            <span v-else>{{organization.appDate}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            注册号：
            <el-input
              class="inline-input"
              v-if="editable"
              v-model="organization.registryCode"
              placeholder="请输入注册号"
              size="small"
            ></el-input>
            <span v-else>{{organization.registryCode}}</span>
          </el-col>
          <el-col :span="12">
            注册日期：
            <el-date-picker
              v-if="editable"
              v-model="organization.registryDate"
              size="small"
              type="date"
              placeholder="请选择注册日期"
            ></el-date-picker>
            <span v-else>{{organization.registryDate}}</span>
          </el-col>
        </el-row>
      </div>
    </section>

    <!-- 五 -->
    <section>
      <div class="sec-title">
        <h4>五、优先权(国家、初次申请的日期和号码)：</h4>
      </div>
      <div class="sec-content">
        <el-row>
          <el-col :span="12">
            在先申请所在主管局：
            <el-input
              class="inline-input"
              v-if="editable"
              v-model="organization.managePart"
              placeholder="请输入主管局"
              size="small"
            ></el-input>
            <span v-else>{{organization.managePart}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            申请号：
            <el-input
              class="inline-input"
              v-if="editable"
              v-model="organization.initPhone"
              placeholder="请输入申请号"
              size="small"
            ></el-input>
            <span v-else>{{organization.initPhone}}</span>
          </el-col>
          <el-col :span="12">
            申请日期：
            <el-date-picker
              v-if="editable"
              v-model="organization.initDate"
              size="small"
              type="date"
              placeholder="请选择申请日期"
            ></el-date-picker>
            <span v-else>{{organization.initDate}}</span>
          </el-col>
        </el-row>
      </div>
    </section>

    <!-- 六 -->
    <section>
      <div class="sec-title">
        <h4>六、商标：</h4>
      </div>
      <div class="sec-content" style="width:150px;height:150px;border:1px solid #ccc;">
        <!-- <el-img :src="file"></el-img> -->
      </div>
    </section>

    <!-- 七 -->
    <section>
      <div class="sec-title">
        <h4>七、其他事项：</h4>
      </div>
      <div class="sec-content">
        <el-checkbox-group v-model="organization.remarkId">
          <el-checkbox label="1" style="display:block">要求保护颜色的，请作文字说明</el-checkbox>
          <div>
            <el-input v-if="editable" type="textarea" size="small" v-model="organization.protectColor"></el-input>
            <span v-else>{{organization.protectColor}}</span>
          </div>
          <el-checkbox label="2" style="display:block">立体商标</el-checkbox>
          <el-checkbox label="3" style="display:block">声音商标</el-checkbox>
          <el-checkbox label="4" style="display:block">集体或证明商标</el-checkbox>
          <el-checkbox label="5" style="display:block">商标音译(拼音)</el-checkbox>
          <div>
            <el-input v-if="editable" v-model="organization.yinyi"></el-input>
            <span v-else>{{organization.yinyi}}</span>
          </div>
          <el-checkbox label="6" style="display:block">商标意译(英语或法语)</el-checkbox>
          <div>
            <el-input v-if="editable" v-model="organization.yingyi"></el-input>
            <span v-else>{{organization.yingyi}}</span>
          </div>
          <el-checkbox label="7" style="display:block">商标无含义</el-checkbox>
        </el-checkbox-group>
      </div>
    </section>

    <!-- 八 -->
    <section>
      <div class="sec-title">
        <h4>八、商品或/和服务及其类别(不得超过国内申请和注册范围，可附另页)：</h4>
      </div>
      <div class="sec-content">
        <div class="sec-chapter">
          <div class="sec-box">
            1、
            <el-checkbox v-model="organization.goodsServiceId" label="商品或/和服务及其类别:" size="small"></el-checkbox>
          </div>
          <div class="box-list">
            <h4 class="classes-title">
              <el-row>
                <el-col :span="5">
                  <span>类别</span>
                </el-col>
                <el-col :span="19">
                  <span>商品和/或服务</span>
                </el-col>
              </el-row>
            </h4>
            <ul class="classes-box">
              <li v-for="(item,index) in organization.mdlBusinessVoJson" :key="index">
                <el-row>
                  <el-col :span="5">
                    <el-input v-if="editable" v-model="item.goodsServiceType2"></el-input>
                    <div v-else class="box-inner">{{item.goodsServiceType2}}</div>
                  </el-col>
                  <el-col :span="19">
                    <el-input v-if="editable" v-model="item.service2"></el-input>
                    <div v-else class="box-inner">{{item.service2}}</div>
                  </el-col>
                </el-row>
              </li>
            </ul>
          </div>
        </div>

        <div class="sec-chapter">
          <div class="sec-box">
            2、
            <el-checkbox v-model="organization.trademarkType" label="如有对具体国家作商品或/和服务及类别的限定，请注明：" size="small"></el-checkbox>
          </div>
          <div class="box-list">
            <h4 class="classes-title">
              <el-row>
                <el-col :span="5">
                  <span>指定缔约方</span>
                </el-col>
                <el-col :span="19">
                  <span>申请保护的类别及商品和/或服务</span>
                </el-col>
              </el-row>
            </h4>
            <ul class="classes-box">
              <li v-for="(item,index) in organization.mdlBusinessVoJson1" :key="index">
                <el-row>
                  <el-col :span="5">
                    <el-input v-if="editable" v-model="item.goodsServiceType2"></el-input>
                    <div v-else class="box-inner">{{item.goodsServiceType2}}</div>
                  </el-col>
                  <el-col :span="19">
                    <el-input v-if="editable" v-model="item.service2"></el-input>
                    <div v-else class="box-inner">{{item.goodsServiceType2}}</div>
                  </el-col>
                </el-row>
              </li>
            </ul>
          </div>
        </div>

        <div class="sec-chapter">
          <div class="sec-box">
            3、
            <el-checkbox label="若以上空间不足，请在方框内标记，并用附页填写" size="small"></el-checkbox>
          </div>
        </div>
      </div>
    </section>

    <!-- 九 -->
    <section>
      <div class="sec-title">
        <h4>九、指定保护的缔约方(划出该缔约方)：</h4>
      </div>
      <div class="sec-content">
        <div class="sec-chapter">
          <div class="sec-box">
            <h4>同属协定和议定书缔约方：</h4>
          </div>
          <div class="box-list">
            <el-checkbox-group v-model="organization.treatyman" class="statesbox">
              <el-checkbox
                v-for="(state,index) in organization.states"
                :label="state.countryId"
                :key="index"
              >{{state.country}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>

        <div class="sec-chapter">
          <div class="sec-box">
            <h4>纯议定书缔约方：</h4>
          </div>
          <div class="box-list">
            <el-checkbox-group v-model="organization.treatyman1" class="statesbox">
              <el-checkbox
                v-for="(state,index) in organization.states1"
                :label="state.countryId"
                :key="index"
              >{{state.country}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="count-box">
          共
          <span>{{organization.count}}</span> 个缔约方
        </div>
        <div style="height:50px"></div>
      </div>
    </section>

    <!-- 十 -->
    <section>
      <div class="sec-title">
        <h4>十、本申请交费方式：</h4>
      </div>
      <div class="sec-content">
        <div class="sec-chapter">
          <el-checkbox-group v-model="organization.paymentPipe">
            <el-row>
              <el-col>
                <el-checkbox value="通过国家知识产权局向国际局转交规费" label="通过国家知识产权局向国际局转交规费"></el-checkbox>
              </el-col>
              <el-col>
                <el-checkbox value="直接向国际局交纳规费" label="直接向国际局交纳规费"></el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
        </div>
      </div>
    </section>

    <footer>
      <el-row>
        <el-col :span="12" :offset="12">
          <div>（加盖代理人章戳；无代理人的加盖申请人章戳）</div>
          <el-row>
            <el-col :span="18" :offset="6">
              <div class="footer-info">
                <p>
                  联系人:
                  <span>{{organization.applicantsName}}</span>
                </p>
                <p>
                  电话(含地区号):
                  <span>{{organization.phone}}</span>
                </p>
                <p>
                  日期:
                  <span>{{organization.appDate}}</span>
                </p>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </footer>
    <!-- <el-input v-if="editable" v-model="yingyi"></el-input>
    <span v-else>{{yingyi}}</span>-->
  </div>
</template>

<script>
export default {
  name: 'Form',
  data() {
    return {
      organization: {

        appFileCode: '', //  申请人或代理人文件编号      
        pagesCount: '', //  附页页数     

        applicantsName: '', // 申请人中文名称       
        applicantsNameEn: '', // 申请人英文名称       
        applicantsAppAddr: '', // 申请人地址
        postcode: '', // 邮政编码
        phone: '', // 电话  
        emailAddr: '', // 电子邮件地址
        fax: '', // 传真

        applicantsCommAddr: '', // 申请人通信地址
        languageFile: null, // 收文语言选择:如：1英文，2法语
        applicantsStatus: [],

        proxy: '', // 代理人信息   
        proxyAddr: '', // 代理人地址   
        proxyName: '', // 代理人中文名称   
        proxyNameEn: '', // 代理人英文名称   
        proxyPostcode: '', // 邮政编码  

        appCode: '', // 申请号
        appDate: '', // 申请日期

        registryCode: '', // 注册号   
        registryDate: '', // 注册日期  

        priority: '', // 优先权(国家、初次申请的日期和号码) ：   
        managePart: '', // 先申请所在主管局
        initPhone: '', // 初次申请号码
        initDate: '', // 初次申请日期

        file: '', // 商标图片上传

        remarkId: [], // 其他事项   
        protectColor: '', // 要求保护颜色 
        yinyi: '', // 商标音译 
        yingyi: '', // 商标英译   

        goodsServiceId: '', // 商品或/和服务及其类别(不得超过国内申请和注册范围，可附另页)
        // 商品或/和服务及其类别  
        mdlBusinessVoJson: [
          {
            goodsServiceType2: "", //类别
            service2: "",
          },
        ],
        // mdlBusinessVoJson1 
        mdlBusinessVoJson1: [
          {
            goodsServiceType2: "", //类别
            service2: "",
          },
        ],


        trademarkType: '', // 1：商品和服务类别2：如有对具体国家作商品或 / 和服务及类别的限定   
        treatyman: [], // 指定保护的缔约方(划出该缔约方)    
        treatyman1: [], // 纯议定书缔约方(划出该缔约方)    

        states: [], // 同属协定和议定书缔约方
        states1: [],  // 纯议定书缔约方
        count: '',// 缔约方总数

        paymentPipe: [], // 本申请交费方式   


        // branchNetworkId: '', // 网点编号
        // date1: '', // 首次申请日期

        // goods: '', // 商品
        // goodsServiceType: '', // 商品或服务类别
        // goodsServiceType2: '', // 商品或服务类别2
        // id: '', // 马德里商标国际注册申请书


        // proAppendJson: '', // 共享人 json

        // service1: '', // 服务
        // service2: '', // 服务2
        // subStatus: '', // 状态 1保存 2选择通过 3选择未通过 4未审核   
        // trademarkLink: '', // 商标图片地址   
        // trademarkName: '', // 商标名称   

        // userId: '', // 用户id   


      },
      editable: false // 可编辑
    }
  },
  computed: {
    appFileCodeCheck() {
      return this.organization.appFileCode ? true : false;   //  申请人或代理人文件编号复选框
    },
    pagesCountCheck() {
      return this.organization.pagesCount ? true : false;   //  附页页数复选框
    },
  },
  filters: {
    // 状态过滤器
    subStatusFilter(v) {
      switch (v) {
        case 1:
          return '保存'
          break;
        case 2:
          return '选择通过'
          break;
        case 3:
          return '选择未通过'
          break;
        case 4:
          return '未审核'
          break;
        default:
      }
    }
  },
  methods: {
    // 提交审核
    lastPage() {
      this.editable = false; // 更改为不可编辑
    },
    // 修改
    modify() {
      this.editable = !this.editable; // 更改为可编辑
    },
    // 图片上传成功
    handleAvatarSuccess(res, file) {
      this.organization.file = URL.createObjectURL(file.raw);
    },
    // 初始化数据
    getData() {
        this.$http.get('/trademark/mdlBusiness/findById', {
            params: {
                id: this.$route.query.id
            }
        }).then(response => {
            if (response.data.code == 200) {
                let resPublic = response.data.data.public;
                let data = response.data.data.data;
s
                this.organization.appFileCode = data.appFileCode; // 申请人或代理人文件编号

                this.organization.applicantsName = data.applicantsName; // 申请人名称（中文）
                this.organization.applicantsNameEn = data.applicantsNameEn; // 申请人名称（英文）
                this.organization.applicantsAppAddr = data.applicantsAppAddr; // 申请人地址（中文）
                this.organization.appAddEn = data.appAddEn; // // 申请人地址（英文）

                this.organization.postcode = data.postcode;  //邮政编码
                this.organization.phone = data.phone;  //电话
                this.organization.emailAddr = data.emailAddr;  //电子邮件地址
                this.organization.fax = data.fax;  //传真

                this.organization.contacts = data.contacts;  //联系人

                this.organization.ageName = data.ageName;  // 代理机构名称
                this.organization.appNum = data.appNum;    // 商标注册号
                this.organization.isComm = JSON.parse(data.isComm); //  是否共有商标: 1:是0:否

                this.organization.addModel = data.addModel;   // 类别
                this.organization.cancellationCommodity = data.cancellationCommodity;   // 原删减申请号

                this.organization.reasonsWithdrawal = data.reasonsWithdrawal; // 	未交回原注册证原因

                // 共有人...
                // this.otherPublic = data.proAppendJson

            }
      }).catch(error => { })
    }
  },
  created() {
    this.getData();
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* 顶部标题 */
.model-title {
  padding: 0 100px;
  text-align: center;
  font-size: 28px;
  color: #666;
  font-weight: 400;
  margin-bottom: 40px;
}
.model-title h4,
.model-title p {
  margin: 10px 0;
}
.model-title p {
  font-size: 26px;
}
.model-title > h4 {
  font-size: 28px;
  font-weight: normal;
}
/* 行内 */
.inline-input {
  max-width: 200px;
}
/* 各个模块 */
section {
  margin: 10px 0;
  border-top: 1px solid #aaa;
}
.sec-chapter {
  padding-bottom: 25px;
}
.sec-title h4 {
  margin: 10px 0;
}
.sec-box {
  padding: 10px 0;
}
.sec-content-txt {
  font-size: 14px;
  color: #aaa;
}

/* 类别左盒子 */
.box-inner {
  height: 38px;
  line-height: 38px;
  padding: 0 8px;
  border: 1px solid #dcdfe6;
}
/* 共xx个缔约方 */
.count-box {
  float: right;
}
.count-box > span {
  border-bottom: 1px solid #ddd;
}

/* 盖章 */
.footer-info {
  margin-top: 50px;
}
</style>
<style lang="css">
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #666;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #666;
  border-color: #666;
}
.el-checkbox-group {
  font-size: inherit;
}
</style>